<template>
  <div class="personInfor-page">
    <div class="personInfor-title"></div>
    <div class="personInfor-content">
      <!-- 开发建设 -->
      <div class="personInfor-gird personInfor-gird-one">
        <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
        <div class="add-trend">
          <dv-border-box12>
            <div class="charts-box">
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">房地产开发投资</p>
                  <div>
                    <p>
                      累计：<span>{{ personHouseData.lj1 }}</span
                      >亿元
                    </p>
                    <p>
                      同比：<span>{{ personHouseData.tb1 }}</span
                      >%
                    </p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.getDevelopInvestmentData)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.getDevelopInvestmentData).length > 0"
                  :housingSupplyStatsData="personHouseData.getDevelopInvestmentData"
                ></bar-line-pbulic>
              </div>
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">新开工面积</p>
                  <div>
                    <p>
                      累计：<span>{{ personHouseData.lj12 }}</span
                      >万m²
                    </p>
                    <p>
                      同比：<span>{{ personHouseData.tb12 }}</span
                      >%
                    </p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.getDevelopNewlyStartedData)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.getDevelopNewlyStartedData).length > 0"
                  :housingSupplyStatsData="personHouseData.getDevelopNewlyStartedData"
                ></bar-line-pbulic>
              </div>
            </div>
          </dv-border-box12>

          <!-- <div class="charts-box">
 
          </div> -->
          <div class="personInfor-gird-four-title" @click="linkFun('housePropertyDevelopmentConstruction')">
            <p>开发建设</p>
            <p class="link">进入</p>
          </div>
          <div class="personInfor-gird-four-labed">
            <div
              @click="listInd(index, 1)"
              :class="index == personHouseData.listInd1 ? 'active' : ''"
              v-for="(item, index) in personHouseData.listTab"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <!-- map -->
      <div class="personInfor-gird personInfor-gird-two" style="position: relative; background-color: rgba(0, 0, 0, 0)">
        <mapBox
          ref="childRef"
          v-if="Object.keys(personHouseData.personHouseMiddleData).length > 0"
          :housingSupplyStatsData="personHouseData.personHouseMiddleData"
          :cityName="personHouseData.cityName"
          @mapNameChange="mapNameChange"
          style="height: 90%; width: 100%"
        ></mapBox>
        <div class="map-address">
          辽宁省{{ personHouseData.cityName == "" || personHouseData.cityName == "辽宁省" ? "" : "-" + personHouseData.cityName }}
        </div>
        <div class="time-com">
          {{ personHouseData.data4[0] }}至{{ personHouseData.data4[1] }}
          <img src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <div class="time-com time-com-city">
          {{ personHouseData.cityName == "" || personHouseData.cityName == "辽宁省" ? "辽宁省" : personHouseData.cityName }}
          <img src="@/assets/img/realEstate/triangle.png" alt="" />
        </div>
        <city
          :cityName="personHouseData.cityName"
          class="time-com-city-rb"
          :type="{ type: 3, options: personHouseData.getRegionListData }"
          @cityValueChange="cityValueChange"
        ></city>
        <timeSelect :type="{ type: 4, times: personHouseData.data4 }" @timeValueChange="timeValueChanges"></timeSelect>
        <div class="map-bg"></div>
      </div>
      <!-- 商品房供给 -->
      <div class="personInfor-gird personInfor-gird-three">
        <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
        <div class="add-trend">
          <dv-border-box12>
            <div class="charts-box">
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">商品住宅库存</p>
                  <div>
                    <p>累计：<span>0</span>万m²</p>
                    <p>同比：<span>0</span>%</p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.spfgjData)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.spfgjData).length > 0"
                  :housingSupplyStatsData="personHouseData.spfgjData"
                ></bar-line-pbulic>
              </div>
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">去化周期</p>
                  <div>
                    <p><span></span></p>
                    <p><span></span></p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.spfgjData1)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.spfgjData1).length > 0"
                  :housingSupplyStatsData="personHouseData.spfgjData1"
                ></bar-line-pbulic>
              </div>
            </div>
          </dv-border-box12>

          <div class="personInfor-gird-four-title" @click="linkFun('housePropertyCommodityHouseSupply')">
            <p>商品房供给</p>
            <p class="link">进入</p>
          </div>
<!--          <div class="personInfor-gird-four-labed">
            <div
              @click="listInd(index, 2)"
              :class="index == personHouseData.listInd2 ? 'active' : ''"
              v-for="(item, index) in personHouseData.listTab"
              :key="index"
            >
              {{ item }}
            </div>
          </div>-->
        </div>
      </div>
      <!-- 土地供应 -->
      <div class="personInfor-gird personInfor-gird-four">
        <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
        <div class="add-trend">
          <dv-border-box12>
            <div class="charts-box">
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">房地产土地出让面积</p>
                  <div>
                    <p>
                      累计：<span>{{ personHouseData.lj3 }}</span
                      >万m²
                    </p>
                    <p>
                      同比：<span>{{ personHouseData.tb3 }}</span
                      >%
                    </p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.getLandTransferFeeData1)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.getLandTransferFeeData1).length > 0"
                  :housingSupplyStatsData="personHouseData.getLandTransferFeeData1"
                ></bar-line-pbulic>
              </div>
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">房地产土地出让金</p>
                  <div>
                    <p>
                      累计：<span>{{ personHouseData.lj32 }}</span
                      >亿元
                    </p>
                    <p>
                      同比：<span>{{ personHouseData.tb32 }}</span
                      >%
                    </p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.getLandTransferFeeData)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.getLandTransferFeeData).length > 0"
                  :housingSupplyStatsData="personHouseData.getLandTransferFeeData"
                ></bar-line-pbulic>
              </div>
            </div>
          </dv-border-box12>

          <div class="personInfor-gird-four-title" @click="linkFun('landSupply')">
            <p>土地供应</p>
            <p class="link">进入</p>
          </div>
          <div class="personInfor-gird-four-labed">
            <div
              @click="listInd(index, 3)"
              :class="index == personHouseData.listInd3 ? 'active' : ''"
              v-for="(item, index) in personHouseData.listTab"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <!-- 保交房情况-停缓建情况 -->
      <div class="personInfor-gird personInfor-gird-five">
        <div class="personInfor-gird-five-item">
          <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
          <div class="add-trend">
            <div class="personInfor-gird-four-title" @click="linkFun('guaranteeDeliveryHouseCondition')">
              <p>保交房情况</p>
              <p class="link">进入</p>
            </div>
            <div class="bj-sty">
              <dv-border-box8 :dur="10">
                <div class="bj-sty-jfl-content">
                  <p>
                    <span>项目个数</span>
                    <span><dv-digital-flop :config="personHouseData.getBjfDetailsData.xms" /></span>
                  </p>
                  <p>
                    <span>交付项目个数</span>
                    <span><dv-digital-flop :config="personHouseData.getBjfDetailsData.jfxms" /></span>
                  </p>
                  <p>
                    <span>房屋套数</span>
                    <span><dv-digital-flop :config="personHouseData.getBjfDetailsData.fwts" /></span>
                  </p>
                  <p>
                    <span>交付房屋套数</span>
                    <span><dv-digital-flop :config="personHouseData.getBjfDetailsData.jfts" /></span>
                  </p>
                </div>
                <p class="seven-bb">
                  <span><dv-digital-flop style="height: 14px" :config="personHouseData.getBjfDetailsData.jfRate" /></span><span>房屋交付率</span>
                </p>
              </dv-border-box8>
            </div>
          </div>
        </div>
        <div class="personInfor-gird-five-item">
          <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
          <div class="add-trend">
            <div class="personInfor-gird-four-title" @click="linkFun('stoppedSuspendedProjectVitalizeCondition')">
              <p>停缓建情况</p>
              <p class="link">进入</p>
            </div>
            <div class="bj-sty">
              <dv-border-box8 :dur="10">
                <div class="bj-sty-jfl-content">
                  <p>
                    <span>项目个数</span>
                    <span><dv-digital-flop :config="personHouseData.getThjDetailsData.xms" /></span>
                  </p>
                  <p>
                    <span>总面积（万m²）</span>
                    <span><dv-digital-flop :config="personHouseData.getThjDetailsData.zmj" /></span>
                  </p>
                  <p>
                    <span>已盘活个数</span>
                    <span><dv-digital-flop :config="personHouseData.getThjDetailsData.phNum" /></span>
                  </p>
                  <p>
                    <span>未盘活个数</span>
                    <span><dv-digital-flop :config="personHouseData.getThjDetailsData.wphNum" /></span>
                  </p>
                </div>
                <p class="seven-bb">
                  <span><dv-digital-flop style="height: 14px" :config="personHouseData.getThjDetailsData.phRate" /></span><span>盘活率</span>
                </p>
              </dv-border-box8>
            </div>
          </div>
        </div>
      </div>
      <!-- 商品房交易 -->
      <div class="personInfor-gird personInfor-gird-sex">
        <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
        <div class="add-trend">
          <dv-border-box12>
            <div class="charts-box">
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">新建商品房销售面积</p>
                  <div>
                    <p>
                      累计：<span>{{ personHouseData.lj4 }}</span
                      >万m²
                    </p>
                    <p>
                      同比：<span>{{ personHouseData.tb4 }}</span
                      >%
                    </p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.getHouseSalesAreaData)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.getHouseSalesAreaData).length > 0"
                  :housingSupplyStatsData="personHouseData.getHouseSalesAreaData"
                ></bar-line-pbulic>
              </div>
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">新建商品房销售额</p>
                  <div>
                    <p>
                      累计：<span>{{ personHouseData.lj42 }}</span
                      >亿元
                    </p>
                    <p>
                      同比：<span>{{ personHouseData.tb42 }}</span
                      >%
                    </p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.getHouseSalesAmountData)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.getHouseSalesAmountData).length > 0"
                  :housingSupplyStatsData="personHouseData.getHouseSalesAmountData"
                ></bar-line-pbulic>
              </div>
            </div>
          </dv-border-box12>
          <div class="personInfor-gird-four-title" @click="linkFun('commodityHouseTrans')">
            <p>商品房交易</p>
            <p class="link">进入</p>
          </div>
          <div class="personInfor-gird-four-labed">
            <div
              @click="listInd(index, 4)"
              :class="index == personHouseData.listInd4 ? 'active' : ''"
              v-for="(item, index) in personHouseData.listTab"
              :key="index"
            >
              {{ item }}
            </div>
          </div>
        </div>
      </div>
      <!-- 房地产金融 -->
      <div class="personInfor-gird personInfor-gird-seven">
        <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
        <div class="add-trend">
          <dv-border-box12>
            <div class="charts-box">
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">房地产贷款余额</p>
                  <div>
                    <p>累计：<span>0</span>亿元</p>
                    <p>同比：<span>0</span>%</p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.fdcjrData)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.fdcjrData).length > 0"
                  :housingSupplyStatsData="personHouseData.fdcjrData"
                ></bar-line-pbulic>
              </div>
              <div class="charts-box-item">
                <div class="add-trend-l-content-top">
                  <p class="s-title">新增个人住房贷款</p>
                  <div>
                    <p>累计：<span>0</span>亿元</p>
                    <p>同比：<span>0</span>%</p>
                  </div>
                </div>
                <bar-line-pbulic
                  @click="fullSc('bar-line-pbulic', personHouseData.fdcjrData1)"
                  class="h263"
                  style="width: 100%"
                  v-if="Object.keys(personHouseData.fdcjrData1).length > 0"
                  :housingSupplyStatsData="personHouseData.fdcjrData1"
                ></bar-line-pbulic>
              </div>
            </div>
          </dv-border-box12>
          <div class="personInfor-gird-four-title" @click="linkFun('propertyWatchFdcjr')">
            <p>房地产金融</p>
            <p class="link">进入</p>
          </div>
<!--          <div class="personInfor-gird-four-labed">
            <div
              @click="listInd(index, 5)"
              :class="index == personHouseData.listInd5 ? 'active' : ''"
              v-for="(item, index) in personHouseData.listTab"
              :key="index"
            >
              {{ item }}
            </div>
          </div>-->
        </div>
      </div>
      <!-- 监测预警-分析预测-->
      <div class="personInfor-gird personInfor-gird-eight">
        <div class="personInfor-gird-five-item">
          <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
          <div class="add-trend">
            <div class="personInfor-gird-four-title" @click="linkFun('propertyWatchJcyj')">
              <p>监测预警</p>
              <p class="link">进入</p>
            </div>
            <dv-border-box12>
              <div class="eight-bg-box">
                <div class="eight-bg">
                  <div>新建商品房销售价格指数：</div>
                  <div>
                    <p><span>同比增长：</span><span style="color: #dc870f">0%</span></p>
                    <span style="color: #dc870f">超出合理区间</span>
                  </div>
                </div>
                <div class="eight-bg">
                  <div>住宅地价动态监测指数：</div>
                  <div>
                    <p><span>同比增长：</span><span style="color: #00c1bd">0%</span></p>
                    <span style="color: #00c1bd">合理区间</span>
                  </div>
                </div>
                <div class="eight-bg">
                  <div>二手住宅销售价格指数：</div>
                  <div>
                    <p><span>同比增长：</span><span style="color: #00c1bd">0%</span></p>
                    <span style="color: #00c1bd">合理区间</span>
                  </div>
                </div>
                <div class="eight-bg">
                  <div>住宅租赁价格指数：</div>
                  <div>
                    <p><span>同比增长：</span><span style="color: #dc870f">0%</span></p>
                    <span style="color: #dc870f">超出合理区间</span>
                  </div>
                </div>
              </div>
            </dv-border-box12>
          </div>
        </div>
        <div class="personInfor-gird-five-item">
          <img class="personInfor-gird-title" src="@/assets/img/propertyWatch/propertyWatch-title.png" alt="" />
          <div class="add-trend">
            <div class="personInfor-gird-four-title" @click="linkFun('analyseForecast')">
              <p>模拟预测</p>
              <p class="link">进入</p>
            </div>
            <dv-border-box12>
              <div class="eight-bg-box1">
                <div class="eight-bg1-title">{{nextMonthName}}份房地产市场分析预测</div>
                <div class="eight-bg1">新建商品房销售量预测：<span style="color: #00c1bd">0%</span></div>
                <div class="eight-bg1">新建商品房销售均价预测：<span style="color: #00c1bd">0%</span></div>
                <div class="eight-bg1">二手房交易量预测：<span style="color: #00c1bd">0%</span></div>
                <div class="eight-bg1">二手房交易均价预测：<span style="color: #00c1bd">0%</span></div>
              </div>
            </dv-border-box12>
          </div>
        </div>
      </div>
      <!-- 点击放大 type表示是放大的图  其他根据自己组件调整-->
      <el-dialog v-model="personHouseData.dialogVisible" width="60%">
        <component
          :is="personHouseData.componentName"
          v-if="personHouseData.dialogVisible"
          :housingSupplyStatsData="personHouseData.componentParams"
          :type="1"
          :style="{ height: pxToRem(500) + 'px' }"
        ></component>
      </el-dialog>
    </div>
  </div>
</template>
<script lang="ts">
import barLinePbulic from "@/components/propertyWatch/barLinePbulic.vue";
import { ref } from "vue";
import { s } from "vite/dist/node/types.d-aGj9QkWt";
export default {
  components: { barLinePbulic },
};
</script>

<script setup lang="ts">
import { pxToRem } from "@/utils/index";
import usePropertyAlertResale from "@/hooks/propertyWatch/usePropertyWatch";
import timeSelect from "@/components/propertyAlertResale/timeSelect.vue";
import { barLineParamsData } from "@/utils/chartsPbulic";
import mapBox from "@/components/propertyWatch/map.vue";
import city from "@/components/propertyWatch/city.vue";
import { useRouter } from "vue-router";
import {
  getBaseMap,
  getDevelopInvestment,
  getDevelopNewlyStarted,
  getRegionList,
  getHouseSalesAmount,
  getHouseSalesArea,
  getLandTransferFee,
  getBjfDetails,
  getThjDetails,
} from "@/api/propertyWatch";
// 创建一个包含月份名称的数组
const nextMonthName = ref<any>();
const monthNames = ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"];
// 获取当前日期
const currentDate = new Date();
// 获取当前月份
let currentMonth = currentDate.getMonth();
// 计算下一个月的月份
let nextMonth = (currentMonth + 1) % 12;
// 获取下一个月的月份名称
nextMonthName.value = monthNames[nextMonth];

const personHouseData = usePropertyAlertResale();
const router = useRouter();
const childRef = ref<any>();
// 假data
const jiaData = ref<any>({
  yAxisTb: [],
  yAxis: [],
  xAxis: [],
  yAxisHb: [],
  lj: 0,
  tb: 0,
});

// 跳转方法
const linkFun = (url: string) => {
  router.push({
    path: url,
    query: {
      xzqhdm: personHouseData.cityCode,
      startTime: personHouseData.data4[0],
      endTime: personHouseData.data4[1],
      type: 1, //1有权限 2无权限
    },
  });
};

// 图标数据
const ecFun = (data: any, _getData: any, _lj: any, _tb: any, _name: any) => {
  let legendStyle = {
    show: false,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "0%",
    bottom: "5%",
    top: "12%",
  };
  let paramsData = barLineParamsData(
    [_name, "同比增长率", "环比增长率"],
    data.xAxis,
    [
      {
        name: "",
        type: "1",
      },
      {
        name: "",
        type: "2",
      },
      {
        name: "",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.yAxis, data.yAxisTb, data.yAxisHb],
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#79F56F",
        b: "#79F56F",
      },
      {
        a: "rgba(121, 245, 111, 0)", // 将透明度设置为 0，完全透明
        b: "rgba(121, 245, 111, 0)", // 将透明度设置为 0，完全透明
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData[_getData] = paramsData;
  personHouseData[_lj] = data.lj;
  personHouseData[_tb] = data.tb;
};
const ecFun1 = (data: any, _getData: any, _lj: any, _tb: any, _name: any) => {
  let legendStyle = {
    show: false,
    icon: "",
    left: 0,
    top: 0,
    itemWidth: 31,
    itemHeight: 14,
    itemGap: 18,
  };
  let gridConfig = {
    left: "0",
    right: "0%",
    bottom: "5%",
    top: "12%",
  };
  let paramsData = barLineParamsData(
    [_name, "同比增长率"],
    data.xAxis,
    [
      {
        name: "",
        type: "1",
      },
      {
        name: "",
        type: "2",
      },
    ],
    [
      {
        name: "bar",
        type: "1",
        areaStyleType: "1",
        stack: "1",
      },
      {
        name: "line",
        type: "2",
        areaStyleType: "1",
        stack: "1",
      },
    ],
    [data.yAxis, data.yAxisTb],
    [
      {
        a: "#55BBEB",
        b: "#074083",
      },
      {
        a: "#79F56F",
        b: "#79F56F",
      },
    ],
    legendStyle,
    gridConfig
  );
  personHouseData[_getData] = paramsData;
  personHouseData[_lj] = data.lj;
  personHouseData[_tb] = data.tb;
};
// 开发建设
const getDevelopInvestmentFun = async () => {
  let { data } = await getDevelopInvestment({
    xzqhdm: personHouseData.cityCode,
    startTime: personHouseData.data4[0],
    endTime: personHouseData.data4[1],
    type: personHouseData.listInd1 + 1,
  });
  jiaData.value = data;
  if (personHouseData.listInd1 == 0) {
    ecFun(data, "getDevelopInvestmentData", "lj1", "tb1", "房地产开发投资");
  } else {
    ecFun1(data, "getDevelopInvestmentData", "lj1", "tb1", "房地产开发投资");
  }
};
const getDevelopNewlyStartedFun = async () => {
  let { data } = await getDevelopNewlyStarted({
    xzqhdm: personHouseData.cityCode,
    startTime: personHouseData.data4[0],
    endTime: personHouseData.data4[1],
    type: personHouseData.listInd1 + 1,
  });
  if (personHouseData.listInd1 == 0) {
    ecFun(data, "getDevelopNewlyStartedData", "lj12", "tb12", "新开工面积");
  } else {
    ecFun1(data, "getDevelopNewlyStartedData", "lj12", "tb12", "新开工面积");
  }
};
// 商品房交易
const getHouseSalesAreaFun = async () => {
  let { data } = await getHouseSalesArea({
    xzqhdm: personHouseData.cityCode,
    startTime: personHouseData.data4[0],
    endTime: personHouseData.data4[1],
    type: personHouseData.listInd4 + 1,
  });
  if (personHouseData.listInd4 == 0) {
    ecFun(data, "getHouseSalesAreaData", "lj4", "tb4", "新建商品房销售面积");
  } else {
    ecFun1(data, "getHouseSalesAreaData", "lj4", "tb4", "新建商品房销售面积");
  }
};
const getHouseSalesAmountFun = async () => {
  let { data } = await getHouseSalesAmount({
    xzqhdm: personHouseData.cityCode,
    startTime: personHouseData.data4[0],
    endTime: personHouseData.data4[1],
    type: personHouseData.listInd4 + 1,
  });
  console.log(personHouseData.listInd1);
  if (personHouseData.listInd4 == 0) {
    ecFun(data, "getHouseSalesAmountData", "lj42", "tb42", "新建商品房销售额");
  } else {
    ecFun1(data, "getHouseSalesAmountData", "lj42", "tb42", "新建商品房销售额");
  }
};
// 土地供应 左图2 土地出让金
const getLandTransferFeeFun = async () => {
  let { data } = await getLandTransferFee({
    xzqhdm: personHouseData.cityCode,
    startTime: personHouseData.data4[0],
    endTime: personHouseData.data4[1],
    type: personHouseData.listInd3 + 1,
  });
  if (personHouseData.listInd3 == 0) {
    ecFun(data, "getLandTransferFeeData", "lj32", "tb32", "房地产土地出让金");
  } else {
    ecFun1(data, "getLandTransferFeeData", "lj32", "tb32", "房地产土地出让金");
  }
};
const getLandTransferFeeFun1 = async () => {
  jiaData.value.yAxis = jiaData.value.yAxis.map(() => 0);
  jiaData.value.yAxisHb = jiaData.value.yAxisHb.map(() => 0);
  jiaData.value.yAxisTb = jiaData.value.yAxisTb.map(() => 0);
  jiaData.value.lj = 0;
  jiaData.value.tb = 0;
  if (personHouseData.listInd3 == 0) {
    ecFun(jiaData.value, "getLandTransferFeeData1", "lj3", "tb3", "房地产土地出让面积");
  } else {
    ecFun1(jiaData.value, "getLandTransferFeeData1", "lj3", "tb3", "房地产土地出让面积");
  }
};

// 商品房供给
const spfgjDataFun = async () => {
  ecFun(jiaData.value, "spfgjData", "lj2", "tb2", "商品住宅库存");
};
const spfgjDataFun1 = async () => {
  ecFun(jiaData.value, "spfgjData1", "lj22", "tb22", "平均去化周期");
};

// 房地产金融
const fdcjrFun = async () => {
  ecFun(jiaData.value, "fdcjrData", "lj5", "tb5", "房地产贷款余额");
};
const fdcjrFun1 = async () => {
  ecFun(jiaData.value, "fdcjrData1", "lj52", "tb52", "新增个人住房贷款");
};

// 保教楼-停缓建
const getBjfDetailsFun = async () => {
  let { data } = await getBjfDetails({
    xzqhdm: personHouseData.cityCode,
  });
  personHouseData.getBjfDetailsData.xms.number = [data.xms];
  personHouseData.getBjfDetailsData.jfxms.number = [data.jfxms];
  personHouseData.getBjfDetailsData.fwts.number = [data.fwts];
  personHouseData.getBjfDetailsData.jfts.number = [data.jfts];
  personHouseData.getBjfDetailsData.jfRate.number = [data.jfRate];
};
const getThjDetailsFun = async () => {
  let { data } = await getThjDetails({
    xzqhdm: personHouseData.cityCode,
  });
  personHouseData.getThjDetailsData.xms.number = [data.xms];
  personHouseData.getThjDetailsData.zmj.number = [data.zmj];
  personHouseData.getThjDetailsData.phNum.number = [data.phNum];
  personHouseData.getThjDetailsData.wphNum.number = [data.wphNum];
  personHouseData.getThjDetailsData.phRate.number = [data.phRate];
};

// 获取城市列表
const getRegionListFun = async () => {
  let { data } = await getRegionList({ cityCode: "210000" });
  personHouseData.getRegionListData = data;
};

// 地图
const personHouseMiddle = async () => {
  let { data } = await getBaseMap({});
  personHouseData.personHouseMiddleData = data;
};

// 子组件触发当前选中项
const mapNameChange = (data: any) => {
  if (personHouseData.cityName == data.cityName) {
    (personHouseData.cityName = ""), (personHouseData.cityCode = "210000");
  } else {
    (personHouseData.cityName = data.cityName), (personHouseData.cityCode = data.cityCode);
  }
  allFun();
};

// 获取时间组件时间
const timeValueChanges = (va: any) => {
  if (va.type == 4) {
    personHouseData.data4 = va.times;
    allFun();
  }
};

const listInd = (ind: number, num: number) => {
  switch (num) {
    case 1:
      personHouseData.listInd1 = ind;
      getDevelopInvestmentFun();
      getDevelopNewlyStartedFun();
      break;
    case 2:
      personHouseData.listInd2 = ind;
      spfgjDataFun();
      spfgjDataFun1();
      break;
    case 3:
      personHouseData.listInd3 = ind;
      getLandTransferFeeFun();
      getLandTransferFeeFun1();
      break;
    case 4:
      personHouseData.listInd4 = ind;
      getHouseSalesAreaFun();
      getHouseSalesAmountFun();
      break;
    case 5:
      personHouseData.listInd5 = ind;
      fdcjrFun();
      fdcjrFun1();
      break;
    default:
      break;
  }
};

const cityValueChange = (va: any) => {
  personHouseData.cityName = va.name;
  personHouseData.cityCode = va.cityValueSy;
  // 调用子组件方法
  childRef.value.updateChart();
  allFun();
};

// 查询
const allFun = async () => {
  await personHouseMiddle();
  await getDevelopInvestmentFun();
  await getDevelopNewlyStartedFun();
  await getRegionListFun();
  await getHouseSalesAreaFun();
  await getHouseSalesAmountFun();
  await getLandTransferFeeFun();
  await getBjfDetailsFun();
  await getThjDetailsFun();
  await getLandTransferFeeFun1();
  await spfgjDataFun();
  await spfgjDataFun1();
  await fdcjrFun();
  await fdcjrFun1();
};

const fullSc = (componentName: any, componentParams: any) => {
  personHouseData.dialogVisible = true;
  personHouseData.componentName = componentName;
  personHouseData.componentParams = componentParams;
};

allFun();
</script>

<style scoped lang="less">
.charts-box {
  display: flex;
  justify-content: space-between;
  width: 100%;
  height: 100%;
  padding: 12px;
  .charts-box-item {
    width: 49%;
    .add-trend-l-content-top {
      .s-title {
        font-size: 14px;
        color: #c5fffd;
        position: relative;
        margin-left: 20px;
      }
      .s-title::after {
        content: "";
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        left: -20px;
        width: 16px;
        height: 16px;
        background-image: url("@/assets/img/personInfor/small-title-logo.png");
        background-size: 100% 100%;
      }
      div {
        display: flex;
        font-size: 12px;
        color: #ffffff;
        line-height: 17px;
        margin-top: 4px;
        p {
          span {
            color: #e4871d;
            margin: 0 4px;
          }
        }
        p:nth-child(2) {
          margin-left: 20px;
        }
      }
    }
  }
}
.h563 {
  height: 433px;
}
.h263 {
  height: 215px;
}
::v-deep .el-dialog {
  background-color: rgba(8, 64, 132, 0.9);
}

.map-bg {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 110%;
  height: 117px;
  background-image: url("@/assets/img/propertyWatch/map-bg.png");
  background-size: 100% 100%;
  animation: fadeInOut 2s infinite;
}
@keyframes fadeInOut {
  0% {
    opacity: 0.2; /* 透明度为0，完全隐藏 */
  }
  50% {
    opacity: 1; /* 透明度为1，完全显示 */
  }
  100% {
    opacity: 0.2; /* 透明度为0，完全隐藏 */
  }
}
.personInfor-page {
  width: 100vw;
  height: 100vh;
  background-image: url("@/assets/img/personInfor/bg.png");
  background-size: 100% 100%;
  color: #fff;
  overflow: auto;
  // 隐藏滚动条
  &::-webkit-scrollbar {
    width: 0px;
  }
  .personInfor-title {
    width: 100vw;
    height: 85px;
    margin-bottom: 22px;
    background: url("@/assets/img/propertyWatch/header-bg.png");
    background-size: 100% 100%;
  }
  .personInfor-content {
    width: 100vw;
    height: calc(100vh - 111px);
    display: grid;
    grid-gap: 20px 18px;
    grid-template: repeat(6, 140px) / repeat(3, 595px);
    place-content: start center;
    .personInfor-gird {
      color: #fff;
      position: relative;
      // background: rgba(9, 70, 145, 0.15);
      .personInfor-gird-title {
        width: 100%;
        height: 34px;
        img {
          width: 100%;
          height: 100%;
        }
      }
      /deep/ .el-range-editor.el-input__wrapper {
        width: 225px;
        height: 32px;
        position: absolute;
        top: 0px;
        right: 7px;
        padding: 0;
      }
      /deep/ .el-date-editor.el-input {
        width: 225px;
        height: 24px;
        position: absolute;
        top: 0px;
        right: 7px;
        padding: 0;
      }
      /deep/ .el-radio.el-radio--large {
        color: white;
        margin-right: 18px;
      }

      .time-com {
        width: 225px;
        height: 24px;
        position: absolute;
        top: 0px;
        right: 7px;
        background: rgba(27, 126, 242, 0.2);
        border-radius: 0px 0px 0px 0px;
        border: 1px solid rgba(41, 240, 250, 0.6);
        font-weight: 400;
        font-size: 18px;
        color: #ffffff;
        letter-spacing: 1px;
        text-align: right;
        img {
          width: 12px;
          height: 9px;
          position: relative;
          bottom: 2px;
          margin-right: 10px;
        }
      }
      .time-com:hover {
        cursor: pointer;
      }
      .time-com-city {
        width: 115px;
        height: 24px;
        right: 245px;
        text-align: center;
        img {
          width: 12px;
          height: 9px;
          position: relative;
          bottom: 2px;
          margin-right: 0px;
        }
      }
    }
    .add-trend {
      display: flex;
      // padding: 11px 11px 11px 6px;
      height: 267px;
      box-sizing: border-box;
      width: 100%;
    }
    .personInfor-gird-one {
      grid-column: 1 / 2;
      grid-row: 1 / 3;
    }
    .personInfor-gird-two {
      grid-column: 2 / 3;
      grid-row: 1 / 5;
    }
    .personInfor-gird-three {
      grid-column: 3 / 4;
      grid-row: 1 / 3;
      position: relative;
    }
    .personInfor-gird-four {
      grid-column: 1 / 2;
      grid-row: 3 / 5;
      position: relative;
    }
    .personInfor-gird-five {
      grid-column: 2 / 3;
      grid-row: 5 / 7;
      display: flex;
      justify-content: space-between;
      background: rgba(9, 70, 145, 0);
      .personInfor-gird-five-item {
        width: 48%;
        position: relative;
        background: rgba(9, 70, 145, 0.15);
      }
    }
    .personInfor-gird-sex {
      grid-column: 3 / 4;
      grid-row: 3 / 5;
    }
    .personInfor-gird-seven {
      grid-column: 1 / 2;
      grid-row: 5 / 7;
    }
    .personInfor-gird-eight {
      grid-column: 3 / 4;
      grid-row: 5 / 7;
      display: flex;
      justify-content: space-between;
      background: rgba(9, 70, 145, 0);
      .personInfor-gird-five-item {
        width: 48%;
        position: relative;
        background: rgba(9, 70, 145, 0.15);
      }
    }
  }
}

.personInfor-gird-four-labed {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  div {
    width: 90px;
    height: 34px;
    line-height: 34px;
    text-align: center;
    font-size: 16px;
    color: #ffffff;
    cursor: pointer;
  }
  .active {
    background-image: url("@/assets/img/HousingSupply/labed-bg.png");
    background-size: 100% 100%;
  }
}
.personInfor-gird-four-title {
  position: absolute;
  top: 0;
  left: 17px;
  z-index: 100;
  height: 34px;
  color: #ffffff;
  font-size: 16px;
  display: flex;
  align-items: center;
  cursor: pointer;
  .link {
    margin-left: 40px;
    color: #169bd5;
    font-size: 14px;
    font-weight: 600;
  }
}

.personInfor-gird-four-title::after {
  content: "";
  width: 14px;
  height: 13px;
  background: url("@/assets/img/propertyWatch/propertyWatch-titleJr.png");
  background-size: 100% 100%;
  margin-left: 10px;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 35px;
}

.personInfor-gird-four-title:hover {
  color: #169bd5;
}

.bj-sty {
  width: 100%;
  .bj-sty-jfl-content {
    width: 100%;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    padding: 12px 12px 0 12px;
    p {
      margin-bottom: 16px;
      text-align: center;
      span:nth-child(2) {
        width: 92px;
        height: 55px;
        font-weight: 600;
        font-size: 24px;
        line-height: 55px;
      }
      span {
        display: block;
        font-weight: 500;
        font-size: 14px;
        line-height: 21px;
      }
    }
    p:nth-child(1) span:nth-child(2) {
      background: url("@/assets/img/propertyWatch/seven-b-logo1.png") no-repeat;
      background-size: 100% 100%;
    }
    p:nth-child(2) span:nth-child(2) {
      background: url("@/assets/img/propertyWatch/seven-b-logo2.png") no-repeat;
      background-size: 100% 100%;
    }
    p:nth-child(3) span:nth-child(2) {
      background: url("@/assets/img/propertyWatch/seven-b-logo3.png") no-repeat;
      background-size: 100% 100%;
    }
    p:nth-child(4) span:nth-child(2) {
      background: url("@/assets/img/propertyWatch/seven-b-logo4.png") no-repeat;
      background-size: 100% 100%;
    }
  }
}

.seven-bb {
  background: url("@/assets/img/propertyWatch/seven-b-logo.png") no-repeat;
  background-size: 100% 100%;
  width: 121px;
  height: 59px;
  text-align: center;
  margin: 0 auto;
  padding-top: 9px;
  span {
    display: block;
    font-size: 12px;
    color: #ffffff;
    line-height: 17px;
  }
  span:nth-child(2) {
    font-weight: 600;
    font-size: 14px;
    color: #60f9f4;
    line-height: 20px;
    margin-top: 3px;
  }
}

.eight-bg-box {
  width: 100%;
  padding-top: 15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .eight-bg {
    width: 248px;
    height: 53px;
    background: url("@/assets/img/propertyWatch/eight-l.png");
    background-size: 100% 100%;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 12px;
    color: #ffffff;
    line-height: 17px;
    padding: 7px 11px;
    div:nth-child(2) {
      display: flex;
      justify-content: space-between;
      margin-top: 4px;
    }
  }
}
.eight-bg-box1 {
  width: 100%;
  padding-top: 15px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  .eight-bg1-title {
    width: 100%;
    font-weight: 500;
    font-size: 16px;
    color: #ffffff;
    line-height: 22px;
    text-align: center;
    margin-bottom: 11px;
  }
  .eight-bg1 {
    width: 258px;
    height: 40px;
    background: url("@/assets/img/propertyWatch/eight-r.png");
    background-size: 100% 100%;
    margin-bottom: 13px;
    font-weight: 500;
    font-size: 14px;
    color: #ffffff;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.time-list-box {
  position: absolute;
  top: 0px;
  right: 0px;
  display: flex;
  align-items: center;
  color: #ffffff;
  font-size: 14px;
  height: 21px;
}

.map-address {
  position: absolute;
  top: 0px;
  left: 0px;
  letter-spacing: 1px;
  text-shadow: 0px 1px 2px #c1731c;
  font-size: 18px;
  color: #60f9f4;
  letter-spacing: 1.2px;
  margin-left: 27px;
}

.map-address::before {
  content: "";
  position: absolute;
  top: 2px;
  left: -27px;
  width: 20px;
  height: 20px;
  background: url("@/assets/img/personInfor/map-address.png");
  background-size: 100% 100%;
}

/deep/ .time-com-city-rb .el-select {
  width: 115px !important;
  height: 24px;
  right: 245px;
  position: absolute;
  top: 0px;
  z-index: 100;
}
/deep/ .el-select--small,
/deep/ .el-select__wrapper {
  padding: 0 !important;
  opacity: 0;
}
</style>
